<template>
    <view class="page-wrap">
        <view class="pages">
            <view class="searchbox" @tap="goyidoulist">
                <image src="/static/images/searchicon.png" style="margin: 0 10rpx 0 20rpx; width: 28rpx; height: 28rpx">
                </image>
                请输入宝贝名称
            </view>
        </view>

        <view class="pages">
            <swiper class="bannerbox" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular"
                :interval="interval" :duration="duration">
                <block v-for="(items, index) in bannerlist" :key="index">
                    <swiper-item>
                        <image :src="items.pic" :data-item="items" class="bannerboximg" @tap="goNext"></image>
                    </swiper-item>
                </block>
            </swiper>
            <!-- <image class="bannerboximg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0188885a30a1a9a80121db80179ee1.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633184127&t=1eb53ce891b1a3f2288a5394cacf6384"></image> -->
        </view>

        <view class="pages">
            <view class="entrance pages">
                <view class="yidounum">
                    <view class="yidounumbox">
                        <image src="/static/images/douzi.png" style="width: 44rpx; height: 38rpx"></image>
                        <view class="text-black text-lg margin-sm">
                            可用意豆：
                            <text style="color: #ff8722; font-size: 38rpx">{{ yidou.balance }}</text>
                        </view>
                    </view>
                    <view class="yidounumbox" @tap="goorderlist">
                        <view class="text-darkGray text-sm">我的兑换</view>
                        <van-icon name="arrow" size="32rpx" color="#999" />
                    </view>
                    <image class="yd-num" :src="imgUrl + 'yd-num.png'"></image>
                </view>
                <view class="entrances" @tap="golist" data-type="1">
                    <image style="width: 346rpx; height: 140rpx" :src="imgUrl + 'yd-ydormoney.png'"></image>
                    <view class="entrancetext">
                        <view>意豆兑换</view>
                        <view class="entrancetext-tit">玩转意豆换好礼</view>
                    </view>
                </view>
                <!-- <view style="width: 1rpx; height: 100rpx;background: #F1F1F1;">
    </view> -->
                <view class="entrances" @tap="golist" data-type="2">
                    <image style="width: 346rpx; height: 140rpx" :src="imgUrl + 'yd-yd.png'"></image>
                    <view class="entrancetext">
                        <view>现金+意豆</view>
                        <view class="entrancetext-tit">精美礼品兑不停</view>
                    </view>
                </view>
            </view>
            <view class="mt-20" @tap="goXn">
                <image style="width: 710rpx; height: 160rpx" :src="imgUrl + 'xn-banner.png'"></image>
            </view>
        </view>

        <!-- <view class="pages margin-top">
    <scroll-view class="shoptype" scroll-x="true" style=" white-space: nowrap; display:flex;">
      <view  data-index="{{bindex}}" data-id="{{items.id}}"wx:for-index="bindex" wx:for="{{activelist}}"  wx:for-item="items"  bindtap="bindtaps" class="shoptypebtn {{active1==bindex?'text-bold text-black shoptypebtns':''}}">{{items.name}}</view>
    </scroll-view>  
  </view> -->

        <view class="pages margin-top">
            <scroll-view class="liulan" :scroll-x="true" style="white-space: nowrap; display: flex">
                <view class="liulans text-df text-black liulansss">豆值浏览</view>
                <view @tap="bindtaps2" data-index="5" :class="'liulans liulannum ' + (active2 == 5 ? 'active2' : '')"
                    data-integration="">全部</view>
                <view @tap="bindtaps2" data-index="0" :class="'liulans liulannum ' + (active2 == 0 ? 'active2' : '')"
                    data-integration="1">0-1000</view>
                <view @tap="bindtaps2" data-index="1" :class="'liulans liulannum ' + (active2 == 1 ? 'active2' : '')"
                    data-integration="2">1000-3000</view>
                <view @tap="bindtaps2" data-index="2" :class="'liulans liulannum ' + (active2 == 2 ? 'active2' : '')"
                    data-integration="3">3000-5000</view>
                <view @tap="bindtaps2" data-index="3" :class="'liulans liulannum ' + (active2 == 3 ? 'active2' : '')"
                    data-integration="4">5000-1w</view>
            </scroll-view>
        </view>

        <view class="flexs justify-between padding-lr-sm padding-bottom">
            <view>
                <view class="goods_info radius margin-top-sm bg-white" v-if="index % 2 == 0" @tap="toDetails2"
                    :data-productSn="item.productSn" v-for="(item, index) in commodityinfoList" :key="index">
                    <image class="goods_img" mode="widthFix" :src="item.pic" />

                    <view class="padding-lr-sm text-sm text-white">已售: {{ item.sale }}</view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view class="flexs align-center padding-lr-sm padding-bottom-sm">
                        <view class="text-price text-red text-df text-bold" v-if="item.price && item.price != '0.00'">{{
                            item.price == '0.00' ? '' : item.price + ' +'
                        }}</view>
                        <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx">
                        </image>
                        <view class="text-red text-df text-bold">{{ item.integration || '0' }}</view>
                    </view>

                    <view class="flexs padding-bottom-sm flex-wrap padding-left-sm">
                        <view class="padding-bottom-sm text-sm text-orange padding-right-sm"
                            v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>
                        <view class="markerpic" v-if="item.priceMaker" @tap.stop.prevent="getMarkerDetails">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">{{
                                item.priceMaker == '0.00' || item.priceMaker == null ? '' :
                                    '￥' + item.priceMaker
                            }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view>
                <view class="goods_info radius margin-top-sm bg-white" @tap="toDetails2" v-if="index % 2 == 1"
                    :data-productSn="item.productSn" v-for="(item, index) in commodityinfoList" :key="index">
                    <image class="goods_img" mode="widthFix" :src="item.pic" />

                    <view class="padding-lr-sm text-sm text-white">已售: {{ item.sale }}</view>

                    <view class="padding-lr-sm margin-tb-sm text-df text-tline">{{ item.name }}</view>

                    <view class="flexs align-center padding-lr-sm padding-bottom-sm">
                        <view class="text-price text-red text-df text-bold" v-if="item.price && item.price != '0.00'">{{
                            item.price == '0.00' ? '' : item.price + ' +'
                        }}</view>
                        <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx">
                        </image>
                        <view class="text-red text-df text-bold">{{ item.integration || '0' }}</view>
                    </view>

                    <view class="flexs padding-bottom-sm flex-wrap padding-left-sm">
                        <view class="padding-bottom-sm text-sm text-orange padding-right-sm"
                            v-if="item.distributionType != 1 && item.distributionType">支持到店自提</view>
                        <view class="markerpic" v-if="item.priceMaker">
                            <text class="text-orange">创客</text>
                            <text style="color: #ff1717">{{
                                item.priceMaker == '0.00' || item.priceMaker == null ? '' :
                                    '￥' + item.priceMaker
                            }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 盲盒活动 -->
        <block v-if="isOver">
            <van-overlay :show="showFloat">
                <view class="wrapper">
                    <view class="wrapperbox">
                        <view class="centers" @tap.stop.prevent="mpsj">
                            <image v-if="!isColse" @tap="goDetail" class="headimg" mode="aspectFill" :src="imgs[0]">
                            </image>
                            <image v-else class="headimg" mode="aspectFill" :src="imgs[1]"></image>
                        </view>
                        <van-icon class="btn_close" name="close" @tap.native.stop.prevent="clickFloatClose" size="60rpx"
                            color="white" />
                    </view>
                </view>
            </van-overlay>
            <image class="btn_ft" @tap.stop.prevent="clickFloatBtn" :src="btnImg"></image>
        </block>
    </view>
</template>

<script>
import vanOverlay from '@/wxcomponents/vant/dist/overlay/index';
import vanIcon from '@/wxcomponents/vant/dist/icon/index';
const app = getApp(); // 引入app

const _request = require('../../utils/request.js');

const moment = require('../../utils/moment.min');

var bgam = uni.createInnerAudioContext();
let lastClick = 0;
export default {
    components: {
        vanOverlay,
        vanIcon
    },
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            activelist: '',

            active1: 0,
            active2: 5,
            bannerlist: [],
            indicatorDots: true,
            vertical: false,
            autoplay: true,
            interval: 3000,
            duration: 1000,
            circular: true,

            yidou: {
                balance: ''
            },

            //意豆合集
            commodityinfoList: [],

            // 列表数据
            name: '',

            productSn: '',
            brandId: '',
            publishStatus: '',
            verifyStatus: '',
            minPrice: '',
            maxPrice: '',
            integration: '',
            pageNo: 0,
            pageSize: 20,
            showFloat: false,

            //是否弹出动画
            isColse: false,

            isOver: false,

            //是否显示盲盒活动
            imgs: [
                'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/ce9238d8515a46598a79194a2dcaa2fb-files?id=' + Math.random(),
                'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/e24a53bfb1d94a7d8e1c978fe69d59fd-files?id=' + Math.random()
            ],

            btnImg: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/icon_flow.png?id=' + Math.random(),
            countClick: 0,
            makerdetail: null,

            //创客价超出显示
            marker: '',

            makerObj: '',
            makerDetail: {}
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // console.log(1111111111111)
        this.loadAdvertisingList();

        if (uni.getStorageSync('userid')) {
            this.getyidounum();
        } // this.getcommoditylist()
        // 获取列表数据

        this.getallcommodityinfo();
        this.setData({
            isOver: app.globalData.isOver
        }); // this.showActivity()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.setData({
            isOver: app.globalData.isOver
        });

        if (uni.getStorageSync('userid')) {
            // 是否创客
            _request
                .get('/maker/checkIsMaker', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        makerObj: res.data.data
                    });
                    uni.setStorageSync('maker', res.data.data); // 是创客的时候才去获取详情

                    if (res.data.data && res.data.data.ismaker) {
                        // 获取用户创客信息
                        _request
                            .get('/maker/userMakerInfo', {
                                userId: uni.getStorageSync('userid')
                            })
                            .then((res) => {
                                let data = res.data.data;
                                let myupgrade = 0;

                                if (res.data.code == 200 && data) {
                                    // 计算当前升级所需人数
                                    data.makerUpRule.map((item, index) => {
                                        if (data.description == item.description && item.description != '传奇创客') {
                                            myupgrade = data.makerUpRule[index + 1].upgradeNum - data.downBuySum;
                                        } else if (data.description == '传奇创客') {
                                            myupgrade = 3000;
                                        }

                                        return item;
                                    });
                                    uni.setStorageSync('salesVolume', res.data.data.salesVolume);
                                    this.setData({
                                        makerDetail: { ...res.data.data, myupgrade }
                                    });
                                }
                            })
                            .catch((error) => {
                                console.log(error, 'error');
                            });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () { },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        uni.switchTab({
            url: '/firstpages/shopping/index'
        });
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.pageNo = this.pageNo + 1;
        this.getallcommodityinfo();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () { },
    methods: {
        // 去往虚拟商品
        goXn() {
            uni.navigateTo({
                url: '/pagesb/yidoulist/yidoulist?type=9'
            });
        },

        // 查看详情创客卡
        getMarkerDetails() {
            uni.navigateTo({
                url: '/pages/maker/makerdetails/index?title=' + this.makerDetail.description
            });
        },

        goNext(e) {
            const { item } = e.currentTarget.dataset;

            if (item.category == 2 && item.productSn) {
                //跳转商品详情
                uni.navigateTo({
                    url: '/shopingmall/goodsdetail/goodsdetail?productsn=' + item.productSn
                });
                return;
            }

            if (item.category == 3 && item.url) {
                if (item.url == '/firstpages/shopping/index') {
                    //商城
                    uni.switchTab({
                        url: item.url
                    });
                    return;
                }

                if (item.url == 'blind_box') {
                    //盲盒
                    if (this.isOver) {
                        uni.navigateTo({
                            url: '/pagesb/activity/detail'
                        });
                    }

                    return;
                }

                if (item.url === '/pages/maker/makerdetails/index') {
                    //拓客卡
                    let isMaker = uni.getStorageSync('maker')?.ismaker || false;

                    if (isMaker) {
                        uni.navigateTo({
                            url: item.url
                        });
                    } else {
                        uni.navigateTo({
                            url: '/pages/maker/buymaker/index'
                        });
                    }

                    return;
                }

                uni.navigateTo({
                    url: item.url
                });
            }

            if (item.category == 4 && item.url) {
                uni.navigateTo({
                    url: '/pagesb/webpage/index?url=' + encodeURIComponent(item.url)
                });
            }
        },

        // 详情
        toDetails2(e) {
            uni.navigateTo({
                url: '/pagesb/detailed/detailed?productsn=' + e.currentTarget.dataset.productsn
            });
        },

        loadAdvertisingList: function () {
            const that = this;

            _request
                .get(
                    '/banner/getList',
                    {
                        type: 5,
                        roles: 3
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        that.setData({
                            bannerlist: res.data.data || []
                        });
                    }
                });
        },

        getcommoditylist() {
            _request
                .get('/commodity/getcommoditylist', {}, app.globalData.mallType)
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            activelist: res.data.data || []
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //获取意豆
        getyidounum() {
            let userId = uni.getStorageSync('userId');
            const self = this;

            _request
                .get('/wallet/getCoinInfo', {
                    id: userId,
                    userId
                })
                .then((res) => {
                    this.setData({
                        yidou: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        goorderlist() {
            uni.navigateTo({
                url: '/pages/mallorder/orderlist'
            });
        },

        goyidoulist() {
            uni.navigateTo({
                url: '/pagesb/yidoulist/yidoulist?type=0'
            });
        },

        bindtaps(e) {
            this.setData({
                active1: e.currentTarget.dataset.index
            });
            console.log(e.currentTarget.dataset.id);
        },

        bindtaps2(e) {
            this.setData(
                {
                    active2: e.currentTarget.dataset.index,
                    integration: e.currentTarget.dataset.integration,
                    pageNo: 0
                },
                () => {
                    this.getallcommodityinfo();
                }
            );
        },

        golist(e) {
            uni.navigateTo({
                url: '/pagesb/yidoulist/yidoulist?type=' + e.currentTarget.dataset.type
            });
        },

        // 获取列表数据
        getallcommodityinfo() {
            const { name, productSn, publishStatus, verifyStatus, minPrice, maxPrice, integration, pageNo, commodityinfoList } = this;
            let data = {
                name,
                productSn,
                publishStatus,
                verifyStatus,
                integration: integration,
                offset: pageNo,
                pageSize: 20,
                userId: uni.getStorageSync('userId')
            };

            _request
                .get('/mall-product/getYiDouList', { ...data }, app.globalData.mallType)
                .then((res) => {
                    if (res.data.code == 200) {
                        let list = res.data.data || [];
                        list.forEach((e) => {
                            if (e.priceMaker) {
                                let str = e.priceMaker.toString();

                                if (str.length > 6) {
                                    e.marker = true;
                                } else {
                                    e.marker = false;
                                }
                            }
                        });
                        this.setData({
                            commodityinfoList: pageNo > 0 ? [...commodityinfoList, ...list] : list
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //--------盲盒活动---------
        clickFloatBtn() {
            let that = this;
            that.setData({
                imgs: [
                    'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/ce9238d8515a46598a79194a2dcaa2fb-files?' + new moment().valueOf(),
                    'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2021-12-09/e24a53bfb1d94a7d8e1c978fe69d59fd-files?' + new moment().valueOf()
                ],
                showFloat: true
            });
            bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/coin.mp3';
            bgam.play();
        },

        clickFloatClose() {
            if (new moment().valueOf() - lastClick < 3000) {
                return;
            }

            lastClick = new moment().valueOf();
            this.setData({
                isColse: true
            });
            bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/click.mp3';
            bgam.play();
            let that = this;
            setTimeout(function () {
                that.setData({
                    imgs: ['', ''],
                    showFloat: false,
                    isColse: false
                });
                bgam.pause();
            }, 500);
        },

        goDetail() {
            let that = this;

            if (new moment().valueOf() - lastClick < 3000) {
                return;
            }

            lastClick = new moment().valueOf();
            bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/click.mp3';
            bgam.play();
            setTimeout(function () {
                that.setData({
                    imgs: ['', ''],
                    showFloat: !that.showFloat,
                    isColse: false
                });
                uni.navigateTo({
                    url: '../../pagesb/activity/detail'
                });
                bgam.pause();
            }, 500);
        },

        //是否显示悬浮活动
        showActivity() {
            // const lastDay = wx.getStorageSync('showtime') || ''
            // if(!lastDay || !moment().isSame(lastDay, 'day')){
            //   const day = new moment();
            //   wx.setStorageSync('showtime', day)
            if (this.isOver) {
                this.setData({
                    showFloat: true
                });
                bgam.src = 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/activityimage/coin.mp3';
                setTimeout(function () {
                    bgam.play();
                }, 1500);
            } // }else{
            //   this.setData({
            //     countClick: this.data.countClick + 1
            //   })
            // }
        },

        mpsj() {
            console.log('占位：函数 mpsj 未声明');
        }
    }
};
</script>
<style>
.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.padding-lr-sm {
    flex-wrap: wrap;
}

.searchbox {
    width: 710rpx;
    height: 64rpx;
    background-color: #eeeeee;
    border-radius: 32rpx;
    margin: 20rpx 0;
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 24rpx;
}

.bannerbox {
    width: 710rpx;
    height: 370rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
}

.bannerboximg {
    width: 100%;
    height: 370rpx;
}

.entrance {
    position: relative;
    width: 710rpx;
    /* height: 200rpx; */
    /* margin-top: 70rpx; */
    /* background-color: #fff; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
}

.entrances {
    flex: 0.49;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.entrancetext {
    color: #333333;
    font-size: 24rpx;
    margin-top: 10rpx;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 20rpx;
    width: 200rpx;
}

.entrancetext-tit {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    margin-top: 10rpx;
}

.yidounum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx auto;
    width: 710rpx;
    height: 120rpx;
    position: relative;
}

.yidounumbox {
    display: flex;
    align-items: center;
    z-index: 2;
    margin-right: 20rpx;
    margin-left: 20rpx;
}

.goods_info {
    width: 340rpx;
    position: relative;
    box-shadow: 0px 4px 8px 0px rgba(230, 230, 230, 0.5);
}

.goods_img {
    width: 340rpx;
    height: 340rpx;
    border-radius: 10rpx 10rpx 0 0;
}

.shoptype {
    width: 710rpx;
    height: 60rpx;
}

.shoptypebtn {
    display: inline-block;
    margin-right: 40rpx;
    font-size: 28rpx;
}

.shoptypebtns {
    font-size: 32rpx;
}

.liulan {
    width: 710rpx;
    height: 60rpx;
}

.liulans {
    display: inline-block;
}

.liulansss {
    height: 42rpx;
    line-height: 42rp;
    margin-right: 20rpx;
}

.liulannum {
    padding: 0 20rpx;
    line-height: 42rpx;
    height: 42rpx;
    border: 1rpx solid #999999;
    border-radius: 21rpx;
    margin-right: 20rpx;
    color: #999999;
}

.active2 {
    border: 1rpx solid #ff8722;
    background: #fedec2;
    color: #ff8722;
}

.wx-swiper-dots {
    position: relative;
    left: 50%;
    top: 290rpx;
}

.page-wrap {
    position: relative;
}

.markerpic {
    width: max-content;
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    /* margin-left: 20rpx; */
    padding: 0 10rpx;
}

/* 盲盒 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.wrapperbox {
    width: 750rpx;
    display: flex;
    justify-content: center;
    height: 911rpx;
    top: -100rpx;
    position: relative;
}

.headimg {
    width: 720rpx;
    height: 640rpx;
}

.btn_ft {
    position: fixed;
    /* z-index: 99; */
    width: 112rpx;
    height: 136rpx;
    bottom: 120rpx;
    right: 20rpx;
}

.btn_close {
    position: absolute;
    width: 82rpx;
    height: 82rpx;
    bottom: 16rpx;
    left: calc(50% - 41rpx);
}

.text-darkGray {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    line-height: 40rpx;
}

.yd-num {
    position: absolute;
    width: 720rpx;
    height: 120rpx;
}
</style>
